<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">

    <title>课程安排信息管理</title>
    <!--引入相关的js文件-->
    <link href="../backPage/ui/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/waves-0.7.5/waves.css" rel="stylesheet"/>
    <link href="../backPage/ui/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>

    <script src="../backPage/ui/js/jquery-3.3.1.min.js"></script>
    <script src="../backPage/ui/waves-0.7.5/waves.js"></script>
    <script src="../backPage/ui/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="../backPage/ui/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
</head>

<body>
<div id="main">
    <div id="toolbar">
        <button class="btn btn-default" href="javascript:;" onclick="createAction()">新增课程安排信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="updateAction()">修改课程安排信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="deleteAction()">删除课程安排信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="uploadAction()">导入课程安排信息</button>
        <button class="btn btn-default" href="javascript:;"><a style="text-decoration:none; color:black;" id="uploadCourseArrangeModel" href="/download/uploadModel/UploadCourseArrangeInfos.xls">下载导入课程安排信息模板</a></button>
        <br/>
    </div>
    <table id="table"></table>
</div>

<script>
    // 初始化input特效
    function initMaterialInput() {
        $('form input[type="text"]').each(function () {
            if ($(this).val() != '') {
                $(this).parent().find('label').addClass('active');
            }
        });
    }

    var $table = $('#table');

    function init(){
        $("#cid").empty();
        $.ajax({
            url:"/util/getCourseInfosByRunning",
            type:"post",
            success:function(data){
                for(var i = 0;i<data.length;i++){
                    $("#cid").append("<option value="+data[i]['courseid']+">"+data[i]['coursename']+"</option>")
                }
                $("#startweek").val(data[0]['coursestartweek']);
                $("#endweek").val(data[0]['courseendweek']);
            }
        });

        $("#updateCourseId").empty();
        $.ajax({
            url:"/util/getCourseInfosByRunning",
            type:"post",
            success:function(data){
                for(var i = 0;i<data.length;i++){
                    $("#updateCourseId").append("<option value="+data[i]['courseid']+">"+data[i]['coursename']+"</option>")
                }
                $("#updateStartWeek").val(data[0]['coursestartweek']);
                $("#updateEndWeek").val(data[0]['courseendweek']);
            }
        });

        $("#classroomid").empty();
        $.ajax({
            url:"/util/ClassRoominfos",
            type:"post",
            success:function(data){
                for(var i = 0;i<data.length;i++){
                    $("#classroomid").append("<option value="+data[i]['rid']+">"+data[i]['classroomname']+"</option>")
                }
            }
        });

        $("#updateClassRoomid").empty();
        $.ajax({
            url:"/util/ClassRoominfos",
            type:"post",
            success:function(data){
                for(var i = 0;i<data.length;i++){
                    $("#updateClassRoomid").append("<option value="+data[i]['rid']+">"+data[i]['classroomname']+"</option>")
                }
            }
        });
    }

    $(function() {
        init();

        $("#cid").change(function(){
            var cid = $("#cid option:selected").val();
            $.ajax({
                url:"/util/getCourseInfosByCid/"+cid,
                type:"post",
                success:function(data){
                    $("#startweek").val(data['coursestartweek']);
                    $("#endweek").val(data['courseendweek']);
                }
            });
        });

        $("#updateCourseId").change(function(){
            var updateCourseId = $("#updateCourseId option:selected").val();
            $.ajax({
                url:"/util/getCourseInfosByCid/"+updateCourseId,
                type:"post",
                success:function(data){
                    $("#updateStartWeek").val(data['coursestartweek']);
                    $("#updateEndWeek").val(data['courseendweek']);
                }
            });
        });

        //新增课程安排信息
        $("#submitbutton").click(function() {
            var cid = $("#cid option:selected").val();
            var rid = $("#classroomid option:selected").val();
            var weekday = $("#weekday option:selected").val();
            var startweek = $("#startweek").val();
            var endweek = $("#endweek").val();
            var courseindex = $("#courseindex option:selected").val();
            $.ajax({
                url:"/studentManageSystem/addCourseArrange",
                type:"post",
                data:{classroomid:rid,courseindex:courseindex,cid:cid,startweek:startweek,endweek:endweek,weekday:weekday},
                success:function(data){
                    if(data==""){
                        alert("添加失败!");
                    }else if(data == "OK"){
                        alert("添加成功");
                        $table.bootstrapTable('refresh');
                        $("#createModal").modal('hide');
                    }
                }
            })
        });

        //上传课程安排模块
        $("#uploadbutton").click(function(){
            var fname = $("#file").val();
            var pathArray = fname.split("\\");
            if(pathArray[pathArray.length - 1].indexOf(".") == -1){
                alert("请上传文件");
                return;
            }else{
                filetype = pathArray[pathArray.length - 1].split(".")[1];

                if(filetype == "xls"){
                    var type = "file";          //后台接收时需要的参数名称，自定义即可
                    var id = "file";            //即input的id，用来寻找值
                    var formData = new FormData();
                    formData.append(type, $("#"+id)[0].files[0]);    //生成一对表单属性
                    $.ajax({
                        type: "post",           //因为是传输文件，所以必须是post
                        url:"/studentManageSystem/uploadCourseArrangeInfos",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if(data != ""){
                                $table.bootstrapTable('refresh');
                                alert(data);
                            }else{
                                alert("导入失败");
                            }
                        }
                    });

                }else{
                    alert("请上传xls、xlsx格式文件!");
                    return;
                }
            }
        });

        $("#updateSubmitButton").click(function(){
            var coursearrangeid = $("#updateCourseArrangeId").val();
            var cid = $("#updateCourseId option:selected").val();
            var rid = $("#updateClassRoomid option:selected").val();
            var weekday = $("#updateWeekday option:selected").val();
            var startweek = $("#updateStartWeek").val();
            var endweek = $("#updateEndWeek").val();
            var courseindex = $("#updateCourseIndex option:selected").val();
            $.ajax({
                url:"/studentManageSystem/updateCourseArrange",
                type:"post",
                data:{coursearrangeid:coursearrangeid,classroomid:rid,courseindex:courseindex,cid:cid,startweek:startweek,endweek:endweek,weekday:weekday},
                success:function(data){
                    if(data==""){
                        alert("添加失败!");
                    }else if(data == "OK"){
                        alert("添加成功");
                        $table.bootstrapTable('refresh');
                        $("#updateModal").modal('hide');
                    }
                }
            })
        });


        // bootstrap table初始化
        $table.bootstrapTable({
            url: '/studentManageSystem/getCourseArrangeInfos',
            height: getHeight(),
            striped: true,
            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            sortOrder: "desc",
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'coursearrangeid', title: '课程安排编号', align: 'center'},
                {field: 'classroomid', title: '教室编号',align: 'center'},
                {field: 'classroomname', title: '教室名称',align: 'center'},
                {field: 'cid', title: '课程编号',align: 'center'},
                {field: 'coursename', title: '课程名称',align: 'center'},
                {field:'shouldcount',title:'选课人数',align:'center'},
                {field:'shouldnamelabels',title:'学生名单',align:'center'},
                {field:'courseindex',title:'节次',align:'center'},
                {field:'startweek',title:'开始周次',align:'center'},
                {field:'endweek',title:'结束周次',align:'center'},
                {field:'weekday',title:'星期',align:'center'},
                {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ]
        });
    });

    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="delete" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }
    // 格式化时间
    function timeFormatter(value , row, index) {
        return new Date(value).toLocaleString().split(' ')[0];
    }

    function getHeight() {
        return $(window).height() - 20;
    }

    // 删除
    var deleteDialog;
    function deleteAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            deleteDialog = $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: false,
                content: '确认删除该课程安排信息吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for (var i in rows) {
                                ids.push(rows[i].coursearrangeid);
                            }
                            $.ajax({
                                type: 'get',
                                url: '/studentManageSystem/deleteCourseArrangeByIds/'+ids.join("-"),
                                success: function(result) {
                                    if(result == "OK"){
                                        deleteDialog.close();
                                        $table.bootstrapTable('refresh');
                                        alert("删除成功");
                                    }else{
                                        alert("删除失败");
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: textStatus,
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }

    //创建课程安排信息
    function createAction(){
        $("#createModal").modal("show");
    }

    //导入课程安排信息
    function uploadAction(){
        $("#uploadModal").modal("show");
    }

    //更新课程安排信息
    function updateAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            //赋初值
            var obj = rows[0];
            var coursearrangeid = obj['coursearrangeid'];
            var updateCourseId = obj['updateCourseId'];
            $("#updateCourseArrangeId").val(coursearrangeid);
            $("#updateModal").modal('show');
        }
    }

</script>

<!-- 添加课程安排信息模态框（Modal） -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="createModalTitle">
                    添加课程安排信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="cid">课程名称</label>
                        <select class="form-control" id="cid" name="cid" placeholder="cid"></select>
                    </div>

                    <div class="form-group">
                        <label for="classroomid">教室名称</label>
                        <select type="text" class="form-control" id="classroomid" name="classroomid" placeholder="classroomid"></select>
                    </div>

                    <div class="form-group">
                        <label for="weekday">星期</label>
                        <select type="text" class="form-control" id="weekday" name="weekday" placeholder="weekday">
                            <option value="星期一">星期一</option>
                            <option value="星期二">星期二</option>
                            <option value="星期三">星期三</option>
                            <option value="星期四">星期四</option>
                            <option value="星期五">星期五</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="courseindex">节次</label>
                        <select type="text" class="form-control" id="courseindex" name="courseindex" placeholder="courseindex">
                            <option value="第一大节">第一大节</option>
                            <option value="第二大节">第二大节</option>
                            <option value="第三大节">第三大节</option>
                            <option value="第四大节">第四大节</option>
                            <option value="第五大节">第五大节</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="startweek">起始周</label>
                        <input class="form-control" type="number" id="startweek" name="startweek" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="endweek">结束周</label>
                        <input class="form-control" type="number" id="endweek" name="endweek" readonly="readonly"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="submitbutton">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 更新课程安排信息模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="updateModalTitle">
                    修改课程安排信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="updateCourseArrangeId">课程安排编号</label>
                        <input class="form-control" id="updateCourseArrangeId" name="updateCourseArrangeId" placeholder="CourseArrangeId" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="updateCourseId">课程名称</label>
                        <select class="form-control" id="updateCourseId" name="updateCourseId" placeholder="updateCourseId"></select>
                    </div>

                    <div class="form-group">
                        <label for="updateClassRoomid">教室名称</label>
                        <select type="text" class="form-control" id="updateClassRoomid" name="updateClassRoomid" placeholder="updateClassRoomid"></select>
                    </div>

                    <div class="form-group">
                        <label for="updateWeekday">星期</label>
                        <select type="text" class="form-control" id="updateWeekday" name="updateWeekday" placeholder="updateWeekday">
                            <option value="星期一">星期一</option>
                            <option value="星期二">星期二</option>
                            <option value="星期三">星期三</option>
                            <option value="星期四">星期四</option>
                            <option value="星期五">星期五</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="updateCourseIndex">节次</label>
                        <select type="text" class="form-control" id="updateCourseIndex" name="updateCourseIndex" placeholder="courseindex">
                            <option value="第一大节">第一大节</option>
                            <option value="第二大节">第二大节</option>
                            <option value="第三大节">第三大节</option>
                            <option value="第四大节">第四大节</option>
                            <option value="第五大节">第五大节</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="updateStartWeek">起始周</label>
                        <input class="form-control" type="number" id="updateStartWeek" name="updateStartWeek" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="updateEndWeek">结束周</label>
                        <input class="form-control" type="number" id="updateEndWeek" name="updateEndWeek" readonly="readonly"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="updateSubmitButton">
                    确认修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 导入课程安排信息模态框（Modal） -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="uploadModalTitle">
                    导入摄像头信息
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="file">上传文件</label>
                        <input type="file" class="form-control" id="file" name="file"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="uploadbutton">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
</html>